import React from 'react'
import NavMenu from '../../common/nav-menu'
import {getSerial, removeVideoFromSerial} from '../../../actions/serial'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import {Col, Divider, Icon, Row} from 'antd'
import VideoBox from '../../common/video-box'

class PreviewSerialBody extends React.Component {
  state = {
    expandDescription : false
  }
  componentDidMount () {
    const {serialId} = this.props.match.params
    this.props.getSerial(serialId)
  }

  changeExpand = () => {
    this.setState({
      expandDescription : !this.state.expandDescription
    })
  }

  render () {
    const {serial} = this.props
    const {expandDescription} = this.state
    return <div>
      <NavMenu />
      <Row>
        <Col span={6}>
          <img src={serial.coverUrl} alt='' width='100%' height={200} />
        </Col>
        <Col span={12} offset={1}>
          <Row type='flex' justify='space-between'>
            <Col span={8}>
              <h1>{serial.title}</h1>
            </Col>
            <Col span={4} style={{textAlign: 'center'}}>
              <h3><Icon type='solution' /> {serial.username}</h3>
            </Col>
          </Row>
          <p>
            {expandDescription || serial.description.length < 270
              ? serial.description
              : serial.description.slice(0, 270).concat('...')}
          </p>
          {
            serial.description.length > 270
              ? <a onClick={this.changeExpand}>{expandDescription ? '收起' :  '点击展开全文'}</a>
              : ''
          }
        </Col>
      </Row>
      <Divider />
      <Row type='flex' >
        {
          serial.videos.map((simpleVideoResponses, index) => {
            return <Col span='6' key={index} className='margin-b-3'>
              <VideoBox
                video={simpleVideoResponses}
                remove
                serialId={serial.id}
                removeVideoFromSerial={(serialId, videoId) => this.props.removeVideoFromSerial(serialId, videoId)}
              />
            </Col>
          })
            }
      </Row>

    </div>
  }
}

const mapStateToProps = ({serial}) => ({
  serial
})

const mapDispatchToProps = dispatch => ({
  getSerial: (id) => dispatch(getSerial(id)),
  removeVideoFromSerial: (serialId, videoId) => dispatch(removeVideoFromSerial(serialId, videoId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PreviewSerialBody))
